    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3无缝轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            li{
                float: left;
                list-style: none;
            }
            ul{
                width: 900px;
                height:200px;
                /*margin: 200px auto;*/
                animation: move 3s linear infinite ;
            }
            ul>li>img{
                width: 100px;
                height: 80px;
            }
            .box{
                margin: 200px auto;
                height: 80px;
                width: 100px;
                border: 1px solid #11fe0d;
                overflow: hidden;
            }
            ul:hover{
                -webkit-animation-play-state:paused;
                animation-play-state:paused;
                border-color: #f52f4c;
            }
            @keyframes move {
                0%{
                    transform: translate(0);
                }
                100%{
                    transform: translate(-400px);
                }

            }
        </style>
    </head>
    <body>
    <div class="box">
        <ul>
            <li><img src="img/k-poke.jpg" alt=""></li>
            <li><img src="img/rabbit1.jpg" alt=""></li>
            <li><img src="img/rabbit2.jpg" alt=""></li>
            <li><img src="img/小火箭.jpg" alt=""></li>
            <li><img src="img/k-poke.jpg" alt=""></li>
            <li><img src="img/rabbit1.jpg" alt=""></li>
            <li><img src="img/rabbit2.jpg" alt=""></li>
            <li><img src="img/小火箭.jpg" alt=""></li>

        </ul>
    </div>

    </body>
    </html>